{% extends "base.html" %}

{% block addStyles %}
#botones {
    text-align: right;
    margin-top: 20px;
}
#vista-previa{
    margin-left: 279px;
    margin-top: 20px;
}

#lista-jugadores {
    width: 100%;
    background-color: #808080;
    border: 1px solid black;
    border-collapse: collapse;
}

#lista-jugadores tr {
    height: 30px;
}

#lista-jugadores td {
    font-size: 16px;
    padding: 5px; 
}

tr.impar {
    background-color: #909090;
}

.color {
    width: 25px;
    height: 25px;
}

.columna-color {
    width: 35px;
}
.gris {
    background-color: #bfbfbf;
}

.Rojo {
    background-image: url('{{STATIC_URL}}rojo.jpg');
}

.Negro {
    background-image: url('{{STATIC_URL}}negro.jpg');
}

.Amarillo {
    background-image: url('{{STATIC_URL}}amarillo.jpg');
}

.Blanco {
    background-image: url('{{STATIC_URL}}magenta.jpg'); /* aca el color no coincide, la db tiene blanco y los archivos tienen magenta */
}

.Azul {
    background-image: url('{{STATIC_URL}}azul.jpg');
}

.Verde {
    background-image: url('{{STATIC_URL}}verde.jpg');
}

{% endblock %}


{% block body %}

<head>
<meta http-equiv="refresh" content="2"> 
<title>SITEG</title>
</head>

<div id="principal">
    <table id="lista-jugadores">
        {% cycle "par" "impar" as clasefila silent %}
        {% for jugador in partida.listar_jugadores %}
        <tr class='{% cycle clasefila %}{{ clasefila }}'><td> {{ jugador.usuario.nombreParaJugar }} </td><td class="columna-color"><div class="color {{ jugador.color }}" /> </td>
        </tr>
        {% endfor %}
        {% for i in lista_lugares_disp %}
        <tr class='{% cycle clasefila %}{{ clasefila }}'><td>Lugar disponible</td><td><div class="color gris" /> </td>
        </tr>
        {% endfor %}
    </table>
    <div id="vista-previa">
        Mapa<br />
        <img src="{{ partida.mapa.imagen.url }}" width="170" height="100" />
    </div>

    <div id="botones">
        <a href='javascript:history.go(-1)'><input name="Avandonar" type="submit"  value="Abandonar"/></a>
        <input name="Comenzar" type="submit"  value="Comenzar"/>
    </div>
</div>
{% endblock %}


